import React, { useEffect, memo } from 'react';
import { isKpiChart } from '@/components/Charts/ChartsConfig';
import ChartTypes from './ChartTypes';
import ICharts from './ICharts';
import { Empty } from 'antd';
import { getLevelVisualType, isLevelVisualTypeColumn } from '@/pages/SelfQuery/utils';

const Table = React.lazy(() => import('./Table'));
const Line = React.lazy(() => import('./Line'));
const Bar = React.lazy(() => import('./Bar'));
const Pie = React.lazy(() => import('./Pie'));


import styles from './index.less';

interface CombinedChartProps extends ICharts {
  name?: string
  totalDatas?:any
  isDetails?: boolean;
}

const CombinedChart: React.FC<CombinedChartProps> = memo(
  (props) => {
    const { data, configs, columns, onSelect, drills } = props;
    useEffect(() => {
      if (configs && isKpiChart(data, columns, configs.model)) {
        onSelect && onSelect(data);
      } else {
        onSelect && onSelect([]);
      }
    }, [props]);

    const drillsIcon = (func: any) => {
      //下钻列表为空
      if (!drills || drills.length == 0) {
        return null;
      }
      return (
        <img
          key={1}
          // className={styles.drillImg}
          // src={require('@/assets/images/drill.png')}
          onClick={func}
        />
      );
    };
    const onDataFilter = (
      datas: Array<any>,
      fun: ((datas: Array<any>) => void) | undefined,
      model: any,
    ) => {
      if (datas && datas.length) {
        const keys = Object.keys(datas[0]);
        let obj: any = {};
        datas = datas.map((data) => {
          keys.map((key) => {
            key = key.split('@VisualType@')[0];
            if (isLevelVisualTypeColumn(key, model)) {
              const name = `${key}@VisualType@${getLevelVisualType(key, model)}`;
              if (keys.includes(name)) {
                obj[key] = data[name];
              } else {
                obj[key] = data[key];
              }
            } else {
              obj[key] = data[key];
            }
          });
          return obj;
        });
      }
      if (fun) {
        fun(datas);
      }
    };

    const renderChart = () => {
      let chart;
      let params = { ...props, drillsIcon: drillsIcon };

      // 接口请求结束并且没有图表数据
      if (data && data.length == 0 || !data) {
        return <Empty />;
      }

      if (configs) {
        const { selectedChart, model } = configs;
        let { onSelect, onLongPress } = params;
        const onNewSelect = (datas: Array<any>) => onDataFilter(datas, onSelect, model);
        const onNewLongPress = (datas: Array<any>) => onDataFilter(datas, onLongPress, model);
        params = { ...params, onSelect: onNewSelect, onLongPress: onNewLongPress };
        switch (selectedChart) {
          case ChartTypes.Table:
            chart = <Table {...params} />;
            break;
          case ChartTypes.Line:
            chart = <Line {...params} />;
            break;
          case ChartTypes.Bar:
            chart = <Bar {...params} />;
            break;
          case ChartTypes.Pie:
            chart = <Pie {...params} />;
            break;
          default:
            chart = null;
        }
      }

      return chart;
    };

    return (
      <div>
        <div className={styles.combinedChart}>
          <React.Suspense fallback={null}>
            {configs && !configs.selectedChart ? null : renderChart()}
          </React.Suspense>
        </div>
      </div>
    );
  },
  (prevProps, nextProps) => {
    return JSON.stringify(prevProps) === JSON.stringify(nextProps);
  },
);
export default CombinedChart;
